<template>
  <!-- 基础信息 -->
  <div class="mineMessage" style="background: rgb(21 32 58) !important">
    <h1 class="mine-title">{{ mineForm.csMineName }}</h1>
    <ul class="mine-list">
      <li>
        <p>{{ mineForm.totalReserves }}<span>万吨</span></p>
        <h1>资源总储量</h1>
      </li>
      <li>
        <p>{{ mineForm.csSalesVolume }}<span>万吨</span></p>
        <h1>年销量</h1>
      </li>
      <li>
        <p>{{ mineForm.yearPlan }}<span>万吨</span></p>
        <h1>年计划产量</h1>
      </li>
      <li>
        <p>{{ mineForm.coalSeam }}</p>
        <h1>可开采煤层</h1>
      </li>
      <li>
        <p>{{ mineForm.csMineField }}<span>km²</span></p>
        <h1>井田面积</h1>
      </li>
      <li>
        <p>{{ mineForm.csGasLevel }}</p>
        <h1>瓦斯等级</h1>
      </li>
    </ul>
    <ul class="mine-news">
      <li>
        采矿许可证号：<span>{{ mineForm.licenceCode }}</span>
      </li>
      <li>
        经济类型：<span>{{ mineForm.mineJjlx }}</span>
      </li>
      <li>
        监管单位：<span>{{ mineForm.mineSjqymc }}</span>
      </li>
      <li>
        <span style="display: inline-block; vertical-align: top"
          >煤矿地址：</span
        ><span class="address">{{ mineForm.mineAdress }}</span>
      </li>
      <li>
        联系电话：<span>{{ mineForm.csMinePhone }}</span>
      </li>
      <li>
        企业邮箱：<span>{{ mineForm.email }}</span>
      </li>
    </ul>
    <div class="news">
      <div class="news-list" style="padding: 0 20px">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">基础信息</span>
        </div>
        <p class="small-title"><span></span>煤矿基本信息</p>
        <p class="tit">
          <span> 煤矿编码：</span><span>{{ mineForm.csMineCode }}</span>
        </p>
        <p class="tit">
          <span>许可证状态：</span><span>{{ mineForm.licenceState }}</span>
        </p>
        <p class="tit">
          <span> 采矿许可证有效期：</span
          ><span>{{ mineForm.licenceLimitDate }}</span>
        </p>
        <p class="tit">
          <span>安全生产标准化级别：</span
          ><span>{{ mineForm.securityLevel }}</span>
        </p>
        <p class="tit">
          <span>营业执照号：</span><span>{{ mineForm.mineYyzzCode }}</span>
        </p>
        <p class="tit">
          <span>营业执照有效期：</span
          ><span>{{ mineForm.mineYyzzLimitDate }}</span>
        </p>
        <p class="tit">
          <span>安全生产许可证号：</span
          ><span>{{ mineForm.mineAqscxkzCode }}</span>
        </p>
        <p class="tit">
          <span>安全生产许可证有效期：</span
          ><span>{{ mineForm.mineAqscxkzLimitDate }}</span>
        </p>
        <p class="small-title"><span></span>矿井信息</p>
        <p class="tit">
          <span>开采年限：</span><span>{{ mineForm.miningDuration }}</span>
        </p>
        <p class="tit">
          <span>现采煤层：</span><span>{{ mineForm.coalRake }}</span>
        </p>

        <p class="tit">
          <span>正常涌水量：</span><span>{{ mineForm.normalWaterInflow }}</span>
        </p>
        <p class="tit">
          <span>最大涌水量：</span
          ><span>{{ mineForm.maximumWaterInflow }}</span>
        </p>
        <!-- <p class="small-title"><span></span>井筒信息</p>
        <p class="tit">
          井筒名称：<span>{{ mineForm.pitshaftName }}</span>
        </p>
        <p class="tit">
          井筒编码：<span>{{ mineForm.pitshaftCode }}</span>
        </p> -->
      </div>
      <div class="news-list" style="padding: 0 20px">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">安全生产管理信息</span>
        </div>
        <p class="small-title"><span></span>瓦斯综合防治信息</p>
        <p class="tit">
          <span>抽放方式：</span><span>{{ mineForm.pumping }}</span>
        </p>
        <p class="tit">
          <span>绝对瓦斯涌出量：</span
          ><span>{{ mineForm.csGasAbs }}立方米/分钟</span>
        </p>
        <p class="tit">
          <span>相对瓦斯涌出量：</span
          ><span>{{ mineForm.csGasCom }}立方米/吨</span>
        </p>
        <p class="tit">
          <span>瓦斯抽采利用制度：</span><span>{{ mineForm.gasDrainage }}</span>
        </p>
        <p class="small-title"><span></span>粉尘危害防治信息</p>
        <p class="tit">
          <span>测尘人员总数：</span><span>{{ mineForm.dustDetector }}人</span>
        </p>
        <p class="tit">
          <span>采样器数量：</span><span>{{ mineForm.sampler }}</span>
        </p>
        <p class="small-title"><span></span>水文/地质信息</p>
        <p class="tit">
          <span>水文信息：</span><span>{{ mineForm.hydrology }}</span>
        </p>
        <p class="tit">
          <span>地质信息：</span><span>{{ mineForm.geology }}</span>
        </p>
        <p class="small-title"><span></span>采煤工作面信息</p>
        <p class="tit">
          <span>工作面名称：</span><span>{{ mineForm.faceName }}</span>
        </p>
        <p class="tit">
          <span>工作面代码：</span><span>{{ mineForm.faceCode }}</span>
        </p>
      </div>
      <div class="news-list" style="padding: 0 20px">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">安全生产统计信息</span>
        </div>
        <p class="small-title"><span></span>产量信息</p>
        <p class="tit">
          <span>年生产能力：</span
          ><span>{{ mineForm.csCapacityAnnual }}万吨</span>
        </p>
        <p class="tit">
          <span>实际生产能力：</span
          ><span>{{ mineForm.csCapacityReal }}万吨</span>
        </p>
        <p class="tit">
          <span>剩余储量：</span
          ><span>{{ mineForm.remainingReserves }}万吨</span>
        </p>
        <p class="small-title"><span></span>专业技术人员统计信息</p>
        <p class="tit"><span>职务：</span><span>矿长</span></p>
        <p class="tit">
          <span>矿长姓名：</span><span>{{ mineForm.managerName }}</span>
        </p>
        <p class="tit">
          <span>矿长安全生产许可资格证号：</span
          ><span>{{ mineForm.managerAqxkz }}</span>
        </p>
        <p class="tit">
          <span>矿长安全生产许可资格证有效期：</span
          ><span>{{ mineForm.managerAqxkzLimitDate }}</span>
        </p>
        <p class="tit">
          <span>矿长资格证号：</span><span>{{ mineForm.managerZgzh }}</span>
        </p>
        <p class="tit">
          <span>职工人数：</span><span>{{ mineForm.csWorkersTotal }}人</span>
        </p>
        <p class="tit">
          <span>大专人数：</span><span>{{ mineForm.juniorCollege }}人</span>
        </p>
        <p class="tit">
          <span>本科及以上人数：</span
          ><span>{{ mineForm.undergraduate }}人</span>
        </p>
        <p class="tit">
          <span>井下从业人数：</span><span>{{ mineForm.underground }}人</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mineForm: {}
    }
  },
  methods: {
    getMineList() {
      this.$http.get('/csMineInfo/csMineInfo/detail').then(res => {
        if (res.code == 200) {
          this.mineForm = res.data
        }
      })
    }
  },
  created() {
    this.getMineList()
  }
}
</script>

<style lang="scss" scoped>
.mineMessage {
  height: 100%;
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 20px;
  right: 10px;
  color: #fff;
  .mine-title {
    font-size: 0.3rem;
    font-weight: 600;
    background-image: -webkit-linear-gradient(top, #fff, #82dbfc, #32bcff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 0.1rem;
  }
  .mine-list {
    display: flex;
    margin-top: 0.3rem;
    li:not(:last-child) {
      margin-right: 0.6rem;
    }
    li {
      flex: 1;
      text-align: center;
      background: url(../../../assets/images/img70.png) no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 0.2rem;
      p {
        font-size: 0.22rem;
        span {
          font-size: 0.12rem;
          padding-left: 0.05rem;
        }
      }
      h1 {
        font-size: 0.14rem;
        color: rgb(14, 174, 242);
        margin-top: 0.1rem;
      }
    }
  }
  .mine-news {
    display: flex;
    margin-top: 0.2rem;
    li:not(:last-child) {
      margin-right: 0.2rem;
    }
    li {
      color: rgb(14, 174, 242);
      height: 0.5rem;
      line-height: 0.5rem;
      background: url(../../../assets/images/img69.png) no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 0 0.2rem;
    }
  }
}
.news {
  display: flex;
  position: relative;
  margin-top: 0.2rem;
  .news-list {
    flex: 1;
    background: url(../../../assets/images/img71.png) no-repeat;
    background-size: 100% 100%;
  }
  .news-list:nth-child(2) {
    margin: 0 0.2rem;
  }
}
.small-title {
  line-height: 0.35rem;
  font-size: 0.14rem;
  color: #c5c4c4;
  span {
    width: 0.1rem;
    height: 0.1rem;
    border-radius: 50%;
    background: #32bcff;
    display: inline-block;
    margin-right: 0.05rem;
  }
}
.tit {
  line-height: 0.4rem;
  font-size: 0.14rem;
  color: rgb(14, 174, 242);
}
.tit span {
  padding-left: 0.2rem;
  font-size: 0.16rem;
  color: #fff;
}
.tit span:first-child {
  width: 50%;
  display: inline-block;
  text-align: justify;
  text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
  text-align-last: justify;
  line-height: 0.4rem;
  font-size: 0.14rem;
  color: rgb(14, 174, 242);
}
.address {
  display: inline-block;
  overflow: hidden;
  width: 2.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
